<template>
  <div class="account-menus-box">
    <div class="account-menus-box-inner">
      <div
        class="account-menu nas tse"
        :class="curSelectedMenuIdx === 0 ? 'account-menu-s' : ''"
        @click="switchMenuIdx(0)"
      >
        <div class="account-menu-icon">
          <img
            v-if="curSelectedMenuIdx === 0"
            src="@/assets/menu-icon-user-s.png"
            style="width: 34px; height: 34px; margin-left: 8px"
          />
          <img v-else src="@/assets/menu-icon-user.png" style="width: 34px; height: 34px; margin-left: 8px" />
        </div>

        <div class="account-menu-title">
          <div>General Information</div>
          <div>Edit Your Profile</div>
        </div>
      </div>

      <div
        class="account-menu nas tse"
        :class="curSelectedMenuIdx === 1 ? 'account-menu-s' : ''"
        @click="switchMenuIdx(1)"
      >
        <div class="account-menu-icon">
          <img
            v-if="curSelectedMenuIdx === 1"
            src="@/assets/menu-icon-orders-s.png"
            style="width: 34px; height: 34px; margin-left: 8px"
          />
          <img v-else src="@/assets/menu-icon-orders.png" style="width: 34px; height: 34px; margin-left: 8px" />
        </div>

        <div class="account-menu-title">
          <div>Orders</div>
          <div>Login & security</div>
        </div>
      </div>

      <div
        class="account-menu nas tse"
        :class="curSelectedMenuIdx === 2 ? 'account-menu-s' : ''"
        @click="switchMenuIdx(2)"
      >
        <div class="account-menu-icon">
          <img
            v-if="curSelectedMenuIdx === 2"
            src="@/assets/menu-icon-saved-s.png"
            style="width: 34px; height: 34px; margin-left: 8px"
          />
          <img v-else src="@/assets/menu-icon-saved.png" style="width: 34px; height: 34px; margin-left: 8px" />
        </div>

        <div class="account-menu-title">
          <div>Your Saved ltems</div>
          <div>The products you like</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'accountMenus',

  props: {
    menuIdx: {
      type: Number,
      default: 0
    }
  },

  data() {
    return {
      curSelectedMenuIdx: 0
    }
  },

  mounted() {
    this.curSelectedMenuIdx = this.menuIdx
  },

  methods: {
    switchMenuIdx(idx) {
      if (this.curSelectedMenuIdx === idx) {
        return
      }
      this.curSelectedMenuIdx = idx

      if (this.curSelectedMenuIdx === 0) {
        this.$router.push('/profile')
      } else if (this.curSelectedMenuIdx === 1) {
        this.$router.push('/orders')
      } else if (this.curSelectedMenuIdx === 2) {
        this.$router.push('/saved')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.account-menus-box {
  width: 380px;

  border-radius: 8px;
  background: #f7f7f7;

  .account-menus-box-inner {
    padding: 2px;

    .account-menu {
      height: 93px;
      border-radius: 8px;

      display: flex;
      align-items: center;

      .account-menu-icon {
        margin-left: 22px;
        width: 68px;
        height: 68px;
        border-radius: 50%;
        overflow: hidden;
        background: white;
        font-size: 0;

        display: flex;
        align-items: center;
        justify-content: center;
      }

      .account-menu-title {
        margin-left: 20px;

        :first-child {
          font-size: 20px;
          font-weight: 500;
          color: #29435f;
        }

        :last-child {
          margin-top: 6px;
          font-size: 16px;
          font-weight: 400;
          color: #29435f;
        }
      }
    }

    .account-menu-s {
      background: white;

      .account-menu-title {
        :first-child {
          color: #ff7d45;
        }

        :last-child {
          color: #ff7d45;
        }
      }
    }
  }
}
</style>
